<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="password-box">
		<!-- 登录表单 -->
		<view class="password-from">
			<view class="from-head flex-row-center">
				<text class="text-lin">验证码登录</text>
				<text class="text" @click="toPassword">密码登录</text>
			</view>
			<!-- 表单 -->
			<view class="from-int">
				<up-input maxlength="11" type="number" color="#D3D5D5" v-model="loginFrom.phone" placeholder="请输入手机号码"
					border="none" :customStyle="customStyle" placeholderClass="placeholderClass">
					<template #prefix>
						<view class="prefix-box flex-row-center">
							<text class="prefix-text">+86</text>
							<up-icon name="arrow-down-fill" color="#949699" size="18rpx"></up-icon>
						</view>
					</template>
				</up-input>
			</view>
			<view class="from-int">
				<up-input color="#D3D5D5" type="number" v-model="loginFrom.code" placeholder="请输入验证码" border="none"
					:customStyle="customStyle" placeholderClass="placeholderClass">
					<template #prefix>
						<view class="prefix-box flex-row-center">
							<text class="prefix-text">验证码</text>
						</view>
					</template>
					<template #suffix>
						<view class="suffix-box flex-center">
							<up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
							<view class="getCode-btn flex-center" @click="getCode">
								<text class="text">{{codeTips}}</text>
							</view>
						</view>
					</template>
				</up-input>
			</view>
			<!-- 登录按钮 -->
			<view class="from-btn">
				<up-button text="立即登录" shape="circle" :loading="loginFrom.loadingStatus" @click="submitLogin"
					loadingText="正在登录" :customStyle="{
						height:'88rpx',
						fontWeight: 'bold',
						fontSize: '34rpx',
						color: '#0A534F',
		}" color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
			</view>
			<!-- 操作按钮 -->
			<view class="option-box flex-row-center">
				<text class="option-text" @click="toRetrieve">忘记密码？</text>
				<text class="option-text" @click="toRegister()">注册新用户</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		isValidPhoneNumber,
		validateForm
	} from '@/utils/utools.js';
	import {
		userInfoStore
	} from '../../stores/user';
	const props = defineProps({
		checked: {
			default: false
		}
	})
	const userStore = userInfoStore();
	const emit = defineEmits(['changeState']);
	const rules = {
		phone: {
			required: true,
			maxLength: 11,
			reg: /^1[3-9]\d{9}$/,
			msg: '请输入正确的手机号'
		},
		code: {
			required: true,
			len: 4,
			msg: '请输入四位的验证码'
		},
	};
	const customStyle = {
		backgroundColor: "#303335",
		height: '88rpx',
		boxSizing: 'border-box',
		padding: '0 26rpx',
	}
	const loginFrom = reactive({
		phone: '',
		password: '',
		checked: computed(() => props.checked),
		code: '',
		loadingStatus: false
	})

	const isPassword = ref(true);
	const codeTips = ref('获取验证码');
	const uCodeRef = ref(null);

	const codeChange = (text) => {
		codeTips.value = text;
	};

	const getCode = async () => {
		if (uCodeRef.value.canGetCode) {
			if (!isValidPhoneNumber(loginFrom.phone)) {
				uni.$u.toast('请填写正确的手机号');
				return
			}
			uni.showLoading({
				title: '正在获取验证码',
			});
			const res = await $Api.login.getCode({
				mobile: loginFrom.phone,
				event: 'mobilelogin'
			});
			console.log('getcode', res);
			if (res.code == '1') {
				setTimeout(() => {
					uni.hideLoading()
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					uCodeRef.value.start();
				}, 600);
			} else {
				uni.hideLoading()
				uni.$u.toast(res.msg);
			}

		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	const changeisPassword = () => { //切换密码框属性
		isPassword.value = !isPassword.value
	}
	const toPassword = () => { //切换密码登录
		emit('changeState', 'password');
	}
	const toRegister = () => { //去注册
		// uni.reLaunch({
		// 	url: '/pages/login/register'
		// })
		emit('toRegister');
	}
	const toRetrieve = () => { //去重置
		uni.navigateTo({
			url: "/pages/login/retrievePassWrod"
		})
	}
	const submitLogin = async () => { //提交注册信息
		if (loginFrom.loadingStatus) return
		const validate = validateForm(loginFrom, rules); //验证
		if (!validate.status) return

		if (!loginFrom.checked) {
			uni.$u.toast('请先勾选协议');
			return
		}
		loginFrom.loadingStatus = true;
		const {
			code,
			data,
			msg
		} = await $Api.login.registerOrlogin({
			mobile: loginFrom.phone,
			captcha: loginFrom.code
		}); //注册登录
		if (code == '1') {
			uni.showToast({
				title: '登录成功！'
			})
			if (data && data.userinfo) {
				uni.setStorageSync('user_token', data.userinfo.token);
				userStore.setUserInfo(data.userinfo);
			}
			setTimeout(() => {
				loginFrom.loadingStatus = false;
				uni.switchTab({
					url: '/pages/main/main'
				})
			}, 800)
		} else {
			loginFrom.loadingStatus = false;
			uni.$u.toast(msg);
		}
	}
</script>
<style>
	.placeholderClass {
		font-weight: 500;
		font-size: 30rpx;
		color: #F8F8F8;

	}
</style>
<style lang="scss" scoped>
	.password-box {
		width: 100%;
		box-sizing: border-box;
	}

	.password-from {
		margin-top: 64rpx;


		.from-head {
			justify-content: space-between;

			.text-lin {
				font-weight: 500;
				font-size: 28rpx;
				color: #D3D5D5;
			}

			.text {
				font-weight: 400;
				font-size: 28rpx;
				color: #696F70;
			}
		}

		.from-int {
			margin-top: 40rpx;

			.prefix-box {
				width: 128rpx;
				height: 100%;

				.prefix-text {
					font-weight: 500;
					font-size: 30rpx;
					color: #DEDEDE;
					margin-right: 4rpx;
				}
			}

			.suffix-box {}

			.getCode-btn {
				padding-left: 18rpx;
				border-left: 2rpx solid #4D4D4D;
				font-weight: 500;
				font-size: 24rpx;
				color: #66B7AF;

			}
		}

		.from-btn {
			margin-top: 154rpx;
			width: 100%;
		}

		.option-box {
			width: 100%;
			justify-content: space-between;
			margin-top: 48rpx;

			.option-text {
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.6);
			}
		}
	}
</style>